<template>
    <div>
        <!-- 搜索栏 -->
        <el-row style="margin-top: 20px;">
            <el-col :span="4">
                <el-input placeholder="请输入内容" v-model="LoadAllCarForm.entranceInfoPlate" clearable>
                </el-input>
            </el-col>
            <el-col :span="1">
                <el-button icon="el-icon-search" circle @click="loadAllDefault"></el-button>
            </el-col>
            <el-col :span="7">
                <div class="block">
                    <el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="入场时间"
                        end-placeholder="出场时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                        @change="time">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" @click="dialogVisible = true">车辆驶入</el-button>
                <el-dialog title="车辆新增" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <span slot="footer" class="dialog-footer">
                        <el-input placeholder="请输入内容" v-model="AddCarForm.entranceInfoPlate">
                            <template slot="prepend">车牌号：</template>
                        </el-input>
                        <div style="margin-top: 20px;">
                            <span class="demonstration">入场时间</span>
                            <el-date-picker v-model="AddCarForm.entranceEnterTime" type="datetime" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </div>
                        <!-- <div style="margin-top: 20px;">
                            <span class="demonstration">出场时间</span>
                            <el-date-picker v-model="AddCarForm.entranceOutTime" type="datetime" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </div> -->
                        <div style="margin-top: 20px;">
                            <el-upload class="upload-demo" action="#" :http-request="uploadImage"
                                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                                :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                                <el-button size="small" type="primary">点击上传车辆照片</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </div>
                        <div style="margin-top: 60px;">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addCar">确 定</el-button>
                        </div>
                    </span>
                </el-dialog>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-row style="margin-top: 20px;">
            <el-col>
                <el-table :data="page.list" stripe style="width: 100%">
                    <el-table-column prop="entranceInfoPlate" label="车牌号" width="180">
                    </el-table-column>
                    <el-table-column prop="entranceEnterTime" label="入场时间" width="180">
                    </el-table-column>
                    <el-table-column prop="entranceOutTime" label="出场时间" width="180">
                    </el-table-column>
                    <el-table-column prop="entranceImg" label="车辆入场照片" width="280">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.entranceImg" :preview-src="scope.row.entranceImg"
                                style="width: 200px; height: 100px">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-check" style="color:red;"
                                @click="out(scope.row)">驶出</el-button>
                            <el-button type="text" icon="el-icon-view" @click="handleClick(scope.row)">查看</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="deleteCar(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 分页按钮 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="total, prev, pager, next" :page-size="page.size" :total="page.total"
                    @current-change="changePageNum">
                </el-pagination>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="dialogVisible1">
            <el-image style="width: 100%; height: 100%" :src="this.imgSrc"></el-image>
        </el-dialog>

        <!-- 驶出对话框 -->
        <el-dialog :visible.sync="dialogVisible2" width="30%">
            <span class="demonstration">出场时间</span>
            <el-date-picker v-model="CarPullOutForm.entranceOutTime" type="datetime" placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="carPullOut">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "CarManage",
    data() {
        return {
            chooseTime: [],
            imgSrc: "",
            fileList: [],
            showImagePreview: false,
            page: {},
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            CarPullOutForm: {
                entranceInfoId: null,
                entranceOutTime: null
            },
            LoadAllCarForm: {
                certifiedInfoId: null,
                entranceInfoPlate: "",
                entranceEnterTime: "",
                entranceOutTime: "",
                pageSize: null,
                pageNum: null
            },
            AddCarForm: {
                entranceInfoPlate: "",
                entranceEnterTime: null,
                entranceOutTime: null,
                entranceImg: ""
            }
        }
    },
    methods: {
        out(obj) {
            this.dialogVisible2 = true
            this.CarPullOutForm.entranceInfoId = obj.entranceInfoId
        },
        carPullOut() {
            if (this.CarPullOutForm.entranceOutTime == null) {
                alert("请选择车辆驶出时间")
            } else {
                this.$http.post("/order/entranceInfo/carPullOut", this.CarPullOutForm).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    })
                    this.dialogVisible2=false
                    this.loadAllCar()
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.data.message
                    })
                }
                })
            }
        },
        time() {
            this.LoadAllCarForm.entranceEnterTime = this.chooseTime[0]
            this.LoadAllCarForm.entranceOutTime = this.chooseTime[1]
            this.loadAllCar()
        },
        loadAllDefault() {
            this.LoadAllCarForm.entranceEnterTime = ""
            this.LoadAllCarForm.entranceOutTime = ""
            this.loadAllCar()
        },
        changePageNum(pageNum) {
            this.LoadAllCarForm.pageNum = pageNum;
            this.loadAllCar();
        },
        deleteCar(obj) {
            this.$http.get("/order/entranceInfo/deleteCar", {
                params: {
                    entranceInfoId: obj.entranceInfoId
                }
            }).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    })
                    this.loadAllCar()
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.data.message
                    })
                }
            })
            this.loadAllCar()
        },
        handleClick(obj) {
            this.imgSrc = obj.entranceImg
            this.dialogVisible1 = true
        },
        loadAllCar() {
            this.LoadAllCarForm.certifiedInfoId = localStorage.getItem("certifiedInfoId")
            this.$http.post("/order/entranceInfo/loadAllCar", this.LoadAllCarForm).then(resp => {
                console.log(resp)
                this.page = resp.data.data
            })
        },
        getAccountInformation() {
            this.$http.get("/certified/certifiedAccount/getAccountInformation").then(resp => {
                localStorage.setItem("certifiedInfoId", resp.data.data.certifiedInfoId)
            })
            this.loadAllCar()
        },
        addCar() {
            this.$http.post("/order/entranceInfo/addCar", this.AddCarForm).then(resp => {
                console.log(resp)
                alert(resp.data.message)
                if (resp.data.code == 200) {
                    this.dialogVisible = false
                    this.loadAllCar()
                }
            })
        },
        uploadImage(e) {
            let formData = new FormData()
            formData.append("image", e.file)
            this.$http.post("/certified/applicationForm/uploadImage", formData, {
                "Content-Type": "multipart/form-data"
            }).then(resp => {
                alert(resp.data.message)
                this.AddCarForm.entranceImg = resp.data.data
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        }
    },
    created() {
        this.getAccountInformation()
    }
}
</script>

<style scoped></style>